<html>
<head>
  <style>
    /* Modal Structure */

    html,
    body {
      margin: 0;
      min-height: 180px;
      padding: 0;
      width: 384px;
    }

    .modal_header {
      align-items: center;
      border-bottom: 0.5px solid #dadada;
    }

    .modal_content {
      padding: 0 22px;
    }

    .modal_cta {
      border-top: 0.5px solid #dadada;
      width: 100%;
    }
    /* Header Section */

    .logo {
      padding: 16px;
    }

    .logo_icon {
      vertical-align: text-bottom;
      margin-right: 12px;
    }

    .version_number {
      color: #444;
      font-size: 18px;
    }

    /* CTA Section */

    .flex_container {
      display: flex;
      justify-content: space-between;
      padding: 10px 22px;
    }

    .flex {
      opacity: 1;
      transition: opacity 0.2s ease-in-out;
      width: 120px;
    }

    .flex:hover {
      opacity: 0.4;
    }

    .icon {
      display: inline-block;
      position: relative;
    }

    .icon:before {
      content: "";
      display: inline-block;
      margin-right: 8px;
      vertical-align: middle;
      background-repeat: no-repeat;
      background-size: 33px 33px;
      width: 33px;
      height: 33px;
    }

    .github .icon:before {
      background-image: url(images/github.svg);
    }

    .gitissue .icon:before {
      background-image: url(images/report-issue.svg);
      background-size: 25px 25px;
      width: 25px;
      height: 25px;
      margin-top: 4px;
      padding-bottom: 4px;
    }

    .feedback .icon:before {
      background-image: url(images/feedback.svg);
      background-size: 30px 33px;
      width: 33px;
      height: 33px;
    }

    .website {
      position: relative;
      top: 4px;
    }

    .website .icon:before {
      background-image: url(images/augury-bw.svg);
      background-size: 25px 25px;
      width: 25px;
      height: 25px;
      padding-bottom: 4px;
    }

    .guide .icon:before {
      background-image: url(images/guide.svg);
    }

    /* Content */

    a:link,
    a:visited {
      color: #000000;
      outline: 0;
      text-decoration: none;
    }

    img {
      width: 30px;
    }

    h1 {
      font-family: 'Menlo', monospace;
      font-size: 22px;
      font-weight: 400;
      margin: 0;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
    }

    /* open-sans-regular - latin-ext_latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: url('/assets/assets/fonts/open-sans-v15-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
      src: local('Open Sans Regular'), local('OpenSans-Regular'),
           url('/assets/fonts/open-sans-v15-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('/assets/fonts/open-sans-v15-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('/assets/fonts/open-sans-v15-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
           url('/assets/fonts/open-sans-v15-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('/assets/fonts/open-sans-v15-latin-ext_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
    }
  </style>
</head>

<body>
  <div class="modal_header">
    <h1 class="logo"><img class="logo_icon" src="images/augury-logo.svg">Augury&nbsp;<span class="version_number"></span></h1>
  </div>

  <div class="modal_content">
    <p>Augury is a Dev Tools extension for debugging Angular applications.</p>
  </div>

  <div class="modal_cta">
    <div class="flex_container">
      <div class="flex guide">
        <a href="https://augury.angular.io/pages/guides/" target="__augury_website" class="icon">
          Guides
        </a>
      </div>
      <div class="flex website">
        <a href="https://augury.angular.io/" target="__augury_website" class="icon">
          Website
        </a>
      </div>
      <div class="flex gitissue">
        <a id="create_issue" target="__augury_github" class="icon">
          Issues
        </a>
      </div>
      <div class="flex github">
        <a href="https://github.com/rangle/augury" target="__augury_github" class="icon">
          Github
        </a>
      </div>
      <div class="flex feedback">
        <a href="https://rangleio.typeform.com/to/GrdAGu" target="__augury_feedback" class="icon">
          Feedback
        </a>
      </div>
    </div>
  </div>

  <script src="popup.js"></script>

</body>
</html>
